<template>
  <div class="filedWrap">
    <div class="filedWrap_title">
      <div class="filedWrap_title_label"></div>
      <div class="filedWrap_title_value">
        字段配置
      </div>
    </div>
    <a-table
      class="filedWrap_table"
      rowKey="b"
      :columns="columnsFac"
      :data-source="dataSource"
      bordered
      :pagination="false"
      v-if="type == 'FACTORY'"
    >
      <SearchField
        slot="mapping"
        slot-scope="text, record, index"
        :f_treeData="$store.state.formJson.listData"
        :index="index"
        @f_setField="mappingChange"
        :value="record.mapping"
      ></SearchField>
      <a-input slot="describe" slot-scope="text, record" v-model="record.describe" placeholder="请输入描述" />
      <a-select
        class="filedWrap_table_select"
        slot="hidden"
        slot-scope="text, record"
        v-model="record.hidden"
        placeholder="是否隐藏"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
    </a-table>
    <a-table
      class="filedWrap_table"
      rowKey="b"
      :columns="columnsGen"
      :data-source="dataSource"
      bordered
      :pagination="false"
      v-else-if="type == 'GENERAL'"
    >
      <SearchField
        slot="mapping"
        slot-scope="text, record, index"
        :f_treeData="$store.state.formJson.listData"
        :index="index"
        @f_setField="mappingChange"
        :value="record.mapping"
      ></SearchField>
      <a-input slot="describe" slot-scope="text, record" v-model="record.describe" placeholder="请输入描述" />
      <a-select
        class="filedWrap_table_select"
        slot="hidden"
        slot-scope="text, record"
        v-model="record.hidden"
        placeholder="是否隐藏"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
    </a-table>
    <a-table
      v-else-if="type == 'LIST'"
      class="filedWrap_table"
      rowKey="t"
      :columns="columnsList"
      :data-source="dataSource"
      bordered
      :pagination="false"
    >
      <SearchField
        slot="b"
        slot-scope="text, record, index"
        :f_treeData="entFiledsList"
        :index="index"
        @f_setField="filedChange"
        :value="record.b"
      ></SearchField>
      <SearchField
        slot="mapping"
        slot-scope="text, record, index"
        :f_treeData="$store.state.formJson.listData"
        :index="index"
        @f_setField="mappingChange"
        :value="record.mapping"
      ></SearchField>
      <a-input slot="describe" slot-scope="text, record" v-model="record.describe" placeholder="请输入描述" />
      <a-select
        class="filedWrap_table_select"
        slot="isparam"
        slot-scope="text, record"
        v-model="record.isparam"
        placeholder="是否查询条件"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
      <a-select
        class="filedWrap_table_select"
        slot="hidden"
        slot-scope="text, record"
        v-model="record.hidden"
        placeholder="是否隐藏"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
      <a-input-number slot="sort" slot-scope="text, record" v-model="record.sort" placeholder="请输入排序" />
      <a slot="action" slot-scope="text, record, index" @click="editRules(record, index)">操作</a>
    </a-table>
    <a-table
      v-else-if="type == 'DROP'"
      class="filedWrap_table"
      rowKey="b"
      :columns="columnsDrop"
      :data-source="dataSource"
      bordered
      :pagination="false"
    >
      <SearchField
        slot="mapping"
        slot-scope="text, record, index"
        :f_treeData="$store.state.formJson.listData"
        :index="index"
        @f_setField="mappingChange"
        :value="record.mapping"
      ></SearchField>
      <a-input slot="describe" slot-scope="text, record" v-model="record.describe" placeholder="请输入描述" />
    </a-table>
    <a-table
      v-else
      class="filedWrap_table"
      rowKey="t"
      :columns="columns"
      :data-source="dataSource"
      bordered
      :pagination="false"
    >
      <SearchField
        slot="b"
        slot-scope="text, record, index"
        :f_treeData="entFiledsList"
        :index="index"
        @f_setField="filedChange"
        :value="record.b"
      ></SearchField>
      <SearchField
        slot="mapping"
        slot-scope="text, record, index"
        :f_treeData="$store.state.formJson.listData"
        :index="index"
        @f_setField="mappingChange"
        :value="record.mapping"
      ></SearchField>
      <a-input slot="describe" slot-scope="text, record" v-model="record.describe" placeholder="请输入描述" />
      <a-select
        class="filedWrap_table_select"
        slot="isparam"
        slot-scope="text, record"
        v-model="record.isparam"
        placeholder="是否查询条件"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
      <a-select
        class="filedWrap_table_select"
        slot="hidden"
        slot-scope="text, record"
        v-model="record.hidden"
        placeholder="是否隐藏"
      >
        <a-select-option value="true">
          是
        </a-select-option>
        <a-select-option value="false">
          否
        </a-select-option>
      </a-select>
      <a-input-number slot="sort" slot-scope="text, record" v-model="record.sort" placeholder="请输入排序" />
      <a slot="action" slot-scope="text, record, index" @click="editRules(record, index)">操作</a>
    </a-table>
    <!-- 操作弹窗 -->
    <ActionModal ref="actionModalRef" @actionChange="actionChange"></ActionModal>
  </div>
</template>

<script>
export default {
  props: {
    // 企业表字段
    entFiledsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格
    dataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 类型
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 普通表头
      columns: [
        {
          title: '申请表',
          dataIndex: 't',
          align: 'center',
          width: '15%',
          ellipsis: true
        },
        {
          title: '企业表/制证表',
          dataIndex: 'b',
          align: 'center',
          scopedSlots: { customRender: 'b' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '表单控件',
          dataIndex: 'mapping',
          align: 'center',
          scopedSlots: { customRender: 'mapping' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '描述',
          dataIndex: 'describe',
          align: 'center',
          scopedSlots: { customRender: 'describe' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '隐藏',
          dataIndex: 'hidden',
          align: 'center',
          scopedSlots: { customRender: 'hidden' },
          width: '10%'
        },
        {
          title: '排序',
          dataIndex: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' },
          width: '10%'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: '10%'
        }
      ],
      // 厂区表头
      columnsFac: [
        {
          title: '厂区字段',
          dataIndex: 'b',
          align: 'center',
          width: '15%',
          ellipsis: true
        },
        {
          title: '表单控件',
          dataIndex: 'mapping',
          align: 'center',
          scopedSlots: { customRender: 'mapping' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '描述',
          dataIndex: 'describe',
          align: 'center',
          scopedSlots: { customRender: 'describe' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '隐藏',
          dataIndex: 'hidden',
          align: 'center',
          scopedSlots: { customRender: 'hidden' },
          width: '10%'
        }
      ],
      // 通用模态框表头
      columnsGen: [
        {
          title: '申请表',
          dataIndex: 'b',
          align: 'center',
          width: '15%',
          ellipsis: true
        },
        {
          title: '表单控件',
          dataIndex: 'mapping',
          align: 'center',
          scopedSlots: { customRender: 'mapping' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '描述',
          dataIndex: 'describe',
          align: 'center',
          scopedSlots: { customRender: 'describe' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '隐藏',
          dataIndex: 'hidden',
          align: 'center',
          scopedSlots: { customRender: 'hidden' },
          width: '10%'
        }
      ],
      // 列表表头
      columnsList: [
        {
          title: '申请表',
          dataIndex: 't',
          align: 'center',
          width: '15%',
          ellipsis: true
        },
        {
          title: '企业表/制证表',
          dataIndex: 'b',
          align: 'center',
          scopedSlots: { customRender: 'b' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '表单控件',
          dataIndex: 'mapping',
          align: 'center',
          scopedSlots: { customRender: 'mapping' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '描述',
          dataIndex: 'describe',
          align: 'center',
          scopedSlots: { customRender: 'describe' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '隐藏',
          dataIndex: 'hidden',
          align: 'center',
          scopedSlots: { customRender: 'hidden' },
          width: '10%'
        },
        {
          title: '查询条件',
          dataIndex: 'isparam',
          align: 'center',
          scopedSlots: { customRender: 'isparam' },
          width: '10%'
        },
        {
          title: '排序',
          dataIndex: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' },
          width: '10%'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: '10%'
        }
      ],
      // 下拉模态框表头
      columnsDrop: [
        {
          title: '回显项',
          dataIndex: 'b',
          align: 'center',
          scopedSlots: { customRender: 'b' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '表单控件',
          dataIndex: 'mapping',
          align: 'center',
          scopedSlots: { customRender: 'mapping' },
          width: '15%',
          ellipsis: true
        },
        {
          title: '描述',
          dataIndex: 'describe',
          align: 'center',
          scopedSlots: { customRender: 'describe' },
          width: '15%',
          ellipsis: true
        }
      ]
    }
  },
  components: {
    SearchField: () => import('@/views/businessAssembly/public/spareparts/searchField'),
    ActionModal: () => import('@/views/businessAssembly/jsonComponent/base/actionModal.vue')
  },
  mounted() {},
  methods: {
    // 企业表字段change事件
    filedChange(value, field, index, f_index) {
      this.dataSource[index].b = value
    },
    // mapping字段change
    mappingChange(value, field, index, f_index) {
      this.dataSource[index].mapping = value
    },
    // 配置校验规则
    editRules(record, index) {
      this.$refs.actionModalRef.init(this.dataSource[index], index)
    },
    // 操作弹窗确认
    actionChange(form, index) {
      this.dataSource[index] = Object.assign(this.dataSource[index], form)
    }
  }
}
</script>

<style lang="less" scoped>
.filedWrap_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.filedWrap_title_label {
  width: 4px;
  height: 16px;
  background: #007ce5;
  border-radius: 2px;
}

.filedWrap_title_value {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 550;
  color: #262626;
}
.filedWrap_table {
  margin-top: 20px;
}

.filedWrap_table_select {
  width: 100%;
}

/deep/.ant-table-tbody > tr > td.ant-table-column-sort {
  background: #ffffff;
}
/deep/.ant-table-thead > tr > th.ant-table-column-sort {
  background: #fafafa;
}
</style>
